<template>
    <el-form ref="form" label-width="100" :model="model" :rules="rules">
        <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="头像" prop="headImg">
          <AvatarUploader v-model="model.headImg" />
        </el-form-item>
      </el-col>
    </el-row>

        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="姓名" prop="name">
                    <el-input placeholder="请填写姓名" v-model="model.name" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="昵称" prop="nickName">
                    <el-input placeholder="请填写昵称" v-model="model.nickName" />
                </el-form-item>
            </el-col>
        </el-row>

        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="用户名" prop="username">
                    <el-input placeholder="请填写用户名" v-model="model.username" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="密码" prop="password">
                    <el-input placeholder="请填写密码" v-model="model.password" />
                </el-form-item>
            </el-col>
        </el-row>

        <el-row :gutter="20">
            <el-col :span="24">
                <el-form-item label="角色" prop="roleIdList">
                    <RoleSelwct  v-model="model.roleIdList" />
                </el-form-item>
            </el-col>
        </el-row>

        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="手机号码" prop="phone">
                    <el-input placeholder="请填写手机号码"
                     v-model="model.phone"
                     maxlength="11"
                     />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="邮箱" prop="email">
                    <el-input placeholder="请填写邮箱" v-model="model.email" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="24">
                <el-form-item label="备注" prop="remark">
                    <el-input 
                    type="textarea"
                    rows="4"
                    placeholder="请填写备注"
                    v-model="model.remark" />
                </el-form-item>
            </el-col>
        </el-row>

        <el-row :gutter="20">
            <el-col :span="24">
                <el-form-item label="状态">
                    <el-radio-group
                    v-model="model.status">
                    <el-radio :label="1">开启</el-radio>
                    <el-radio :label="0">关闭</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-col>
        </el-row>

        <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item>
          <div style="width: 100%; text-align: right">
            <el-button type="default" @click="handleCancel">取消</el-button>
            <el-button type="primary" @click="handleConfirm">确认</el-button>
          </div>
        </el-form-item>
      </el-col>
    </el-row>
    </el-form>
</template>


<script>

import { addUser,updUser } from "@/api/user";
import  AvatarUploader  from "@/components/avatar-uploader/index.vue";
export default {
    components:{
        AvatarUploader,
    },
    data(){
        return{
            model:{
                id:0,
                headImg:"",
                name:'',
                nickName:'',
                username:'',
                password:'',
                roleIdList:[],
                status:1,//默认1开启
                remark:'',
                email:'',
                phone:''
            }
        }
    },
    computed:{
        //是否=为编辑模式
        isEditMode(){
            return this.model.id !== 0;
        },

        rules(){
            return{
                name:[{  required : true, message: '必填'  }],
                nickName:[{ required: true, message: '必填' }],
                username:[{ required:true, message: '必填' }],
                password:[{ required: !this.isEditMode, message:'必填'  }],
                roleIdList:[{ required:true, message:' 必填 ' }],
                phone:[{ pattren: /^1\d{10}$/,message:'请填写正确的手机号码'  }],
                email:[{ type:'email', message:'请填写正确的邮箱' }],
            };
        },
    },

    methods:{
        /**
         * 取消处理函数
         */
        handleCancel(){
            this.$emit('cancel');
        },

        /**
         * 却让处理
         */

         async handleConfirm() {
            await this.$refs.form.validate();
            if(this.isEditMode) {
                //编辑
                await updUser(this.model);

            }else {
                //新城
                const { id , ...model  } = this.model;
                await addUser(model);
            }

            this.$emit("success");
         },

         setModel(data) {
            Object.assign(this.model , data);
         }
    },

    
}
</script>